<template>
  <view class="preview-container">
    <!-- #ifndef MP-TOUTIAO -->
    <back-nav-bar title="壁纸详情"></back-nav-bar>
    <!-- #endif -->
    <view class="wallpaper-detail">
      <!-- 使用 flex 容器将图片和信息并排 -->
      <view class="content-wrapper">
        <image :src="wallDetail.smallPicurl" class="wallpaper-image"></image>
        <view class="wallpaper-info">
          <text class="description">{{ wallDetail.description }}</text>
          <text class="nickname">作者：{{ wallDetail.nickname }}</text>
          <text class="score">评分：{{ wallDetail.score }}</text>
          <text class="collections">收藏数：{{ wallDetail.collections }}</text>
          <text class="downloads">下载量：{{ wallDetail.downloads }}</text>
          <text class="tabs" v-if="wallDetail.tabs">标签：{{ wallDetail.tabs }}</text>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { apiGetWallDetail } from '@/api/apis.js'
import BackNavBar from '@/components/back-nav-bar/back-nav-bar.vue'

const wallDetail = ref({})

onLoad(async (options) => {
  try {
    const res = await apiGetWallDetail(options.id)
    if (res.code === 200) {
      wallDetail.value = res.data
    } else {
      console.error('获取壁纸详情失败:', res.msg)
    }
  } catch (error) {
    console.error('请求错误:', error)
  }
})
</script>
<style lang="scss" scoped>
.preview-container {
  padding: 30rpx;
  background-color: #f8f8f8;
  font-family: Arial, sans-serif;

  .wallpaper-detail {
    background-color: #fff;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
    padding: 30rpx;
    margin-bottom: 20rpx;

    .content-wrapper {
      display: flex;
      align-items: flex-start; // 确保内容顶部对齐

      .wallpaper-image {
        width: 300rpx; // 固定宽度以适应大多数屏幕
        height: 300rpx; // 自动高度保持比例
        border-radius: 16rpx;
        margin-right: 20rpx; // 图片与文字间的间距
        box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
      }

      .wallpaper-info {
        flex-grow: 1; // 让信息部分填充剩余空间
        text-align: left; // 文本左对齐

        text {
          display: block;
          margin-bottom: 10rpx;
          color: #333;
        }

        .description {
          font-size: 28rpx;
          color: #666;
          white-space: pre-wrap; // 保持换行符
          line-height: 1.5; // 改善多行文本的可读性
        }

        .nickname,
        .score,
        .collections,
        .downloads,
        .tabs {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }
}
</style>
